<template>
  <div class="card-setting-dialog">
    <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" width="730px">
      <div class="title" slot="title">会员卡积分设置</div>
      <div class="setting-content">
        <div class="line">
          <div class="line-item">
            <div class="label"><span class="required">*</span><span>积分设置</span></div>
            <div class="input points">
              <span>每消费</span>
              <el-input type="number" v-model="consumePoints" style="width: 80px;margin-left: 5px"/>
              <span style="margin-left: 5px">元积1分</span>
            </div>
          </div>
          <div class="line-item">
            <div class="label"><span class="required">*</span><span>清零时间</span></div>
            <div class="input" style="margin-left: 20px">
              <el-switch v-model="resetAccount" :width="50" active-color="#3DBD7D" inactive-color="#BFBFBF"></el-switch>
              <span class="close-open" :class="{'reset-open-close':resetAccount}">{{ resetAccount ? '开' : '关' }}</span>
              <span style="margin-left: 5px"
                    :class="{'reset-switch':resetAccount}">{{ resetAccount ? '开启清零' : '关闭清零' }}</span>
            </div>
          </div>
        </div>
        <div class="line">
          <div class="line-item">
            <div class="label">
              <el-radio v-model="radioReset" :label="true" @click.native.prevent="radioReset=!radioReset">一年后自动清零
              </el-radio>
            </div>
          </div>
        </div>
        <div class="line">
          <div class="line-item">
            <div class="label">
              <el-radio v-model="radioReset" :label="false" @click.native.prevent="radioReset=!radioReset">固定时间清零
              </el-radio>
            </div>
            <div class="reset-input">
              <span style="margin-left: 20px">每年的</span>
              <el-input type="number" v-model="resetMonth" style="width: 85px;margin-left: 20px">
                <span slot="suffix">月</span>
              </el-input>
              <el-input type="number" v-model="resetDate" style="width: 85px;margin-left: 20px">
                <span slot="suffix">日</span>
              </el-input>
            </div>
          </div>
        </div>
        <div class="rule-title">规则：</div>
        <div class="rule-info">积分清零分为三种规则：第一种是不清零，默认选择；第二种是当年发送的所有积分，在下一年度的某个日期清零（日期是自由定义的）；第三种是
          自发送之日起一年后逐步清零（清理日期是前开后闭的规则）；定时任务每天凌晨1点执行。
        </div>
        <div class="rule-title">含义解释：</div>
        <div class="rule-info">第一种：积分是永久存在的，永远不会清零。</div>
        <div class="rule-info">第二种：如果设置的是3月1日，则在每年的额3月1清理上一年度所有积分（即使该积分是上一年度的12月31日获取的，定时任务执行时间是3月1号凌晨1点执行，注意时间的设置）；
        </div>
        <div class="rule-info">第三种：选择该积分的规则，如果2019年1月3日获取了20积分，2月3日获取了10积分，则在2020年1月3日把去年1月3日之前获取的未使用的积分全部清理，2月3日把去年
          2月3日之前获取的未使用的积分清理。
        </div>
      </div>
      <div class="btn">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'cardSetting',
  data () {
    return {
      dialogVisible: false,
      checked: false,
      resetAccount: false,
      radioReset: false,
      resetMonth: '',
      resetDate: '',
      consumePoints: '',
      cardRank: [
        { value: 'guibing', label: '贵宾' },
        { value: 'normal', label: '普通' }
      ],
      cardStatus: [
        { value: 'close', label: '关闭' }
      ]
    }
  },
  methods: {
    show () {
      this.dialogVisible = true
    },
    handleClose () {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
.card-setting-dialog {
  font-size: 14px;
  .title {
    border-bottom: 1px solid #e5e1e1;
    padding-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
  }
  .setting-content {
    margin-top: -30px;
    .line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;
      .line-item {
        display: flex;
        align-items: center;
        .label{
          .required {
            margin-right: 3px;
            color: red;
          }
        }
        .points{
          span {
            color: #FF6E33;
          }
        }
        .input {
          margin-left: 10px;
          width: 260px;
          position: relative;
          .reset-switch {
            color: #3DBD7D;
          }
          .close-open {
            position: absolute;
            top: 0;
            left: 20px;
            color: #FFFFFF;
          }
          .reset-open-close {
            left: 5px;
          }
        }
        .reset-input{
          display: flex;
          align-items: center;
        }
      }
    }
    .rule-title {
      font-weight: bold;
      margin-top: 20px;
    }
    .rule-info {
      font-size: 12px;
      margin-top: 10px;
    }
  }
  .btn {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
</style>
